<template>
    <div>
        <el-card class="box-card">
            <template #header>
                <div class="card-header">
                    <span>文章列表</span>
                </div>
            </template>
            <div class="tableBox">
                <el-table :height="pageSize * 42.22 + 40 + 'px'" ref="multipleTableRef" border stripe v-loading="loading"
                    :data="tableData" style="width: 100%">
                    <el-table-column prop="id" label="id" width="180" />
                    <el-table-column prop="title" label="标题" width="180" />
                    <el-table-column prop="author" label="作者" width="180" />
                    <el-table-column prop="ctime" label="创建时间" width="180" />
                    <el-table-column prop="name" label="操作">
                        <template #default="scope">
                            <el-button size="small" @click="toEdit(scope.row.id)"> 编辑</el-button>
                            <el-button size="small" @click="preView(scope.row.content)"> 预览</el-button>
                            <el-popconfirm title="是否确定删除该账号?">
                                <template #reference>
                                    <el-button size="small" type="danger">删除</el-button>
                                </template>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="pageBox">
                <el-pagination @current-change="currentPageChange" v-model:current-page="currentPage"
                    v-model:page-size="pageSize" :page-sizes="[5, 10, 15, 20]" :small="small" @size-change="sizeChange"
                    :disabled="disabled" :background="background" layout="total, sizes, prev, pager, next, jumper"
                    :total="total" />
            </div>
        </el-card>

        <el-dialog v-model="dialogVisible" title="预览">
            <div v-html="preContent"> </div>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import $_ from 'lodash'
import { ref, shallowRef, reactive, toRaw } from 'vue';
import { _artiCleList } from "@/api/article";
import dayjs from "dayjs";
import usePagination from "@/hooks/pagination";
import { ElMessage } from 'element-plus'
import { ElTable } from 'element-plus'
import { useRouter } from "vue-router";


let tableData = shallowRef([])
const loading = ref(false)
let dialogVisible = ref(false)
let preContent = ref("")

let preView = (content) => {
    dialogVisible.value = true
    preContent.value = content
}

let {
    currentPage,
    total,
    pageSize,
    small,
    disabled,
    background,
    currentPageChange,
    sizeChange
} = usePagination(getData)

// 刚进入页面就发送请求渲染
getData()

// 获取数据
async function getData() {
    // 发送请求前打开等待动画
    loading.value = true
    let res = await _artiCleList({
        currentPage: currentPage.value,
        pageSize: pageSize.value
    })
    // 处理时间
    res.data.data.forEach((item: any) => {
        let newTime = dayjs(item.ctime).format('YYYY-MM-DD') // '25/01/2019'
        item.ctime = newTime
    });

    tableData.value = res.data.data
    total.value = res.data.total
    loading.value = false
}

// 点击跳转到编辑页面
let $router = useRouter()

let toEdit = (id: any) => {
    $router.push({
        path: "/article/edit",
        query: {
            id
        }
    })

}
</script>

<style scoped lang="scss">
.pageBox {
    margin-top: 20px;
}
</style>